/*
* @Author: Iuzuan
* @Date:   2017-12-13 14:16:25
* @Last Modified by:   Iuzuan
* @Last Modified time: 2017-12-14 17:14:14
*/
.treasureBox {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	/* transition: all .5s; */
}
.treasureBox .box{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	height: 5.77rem;
}
.treasureBox .box .top {
	z-index: 2;
	width: 100%;
	height: 3.75rem;
	position: absolute;
	top: 0;
	background: url(../img/openBox-box-top.png) no-repeat center/contain;
	transition: all .5s;

}
.treasureBox .box .bottom {
	width: 100%;
	position: absolute;
	bottom: 0;
	height: 5.02rem;
	background: url(../img/openBox-box-bottom.png) no-repeat center/contain;
	transition: all .5s;
}
.treasureBox.active .box{
	height: 6.9rem;
	animation: box1 .3s linear 2;
}
.treasureBox .light-qian, .treasureBox .light-hou {
	opacity: 0;
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	transition: all 1s;

}
.treasureBox .light-qian {
	z-index: 3;
	height: 6.08rem;
	background: url(../img/openBox-light-qian.png) no-repeat center/contain;

}
.treasureBox .light-hou {
	z-index: -1;
	height: 679rem;
	background: url(../img/openBox-light-hou.png) no-repeat center/contain;
}
.treasureBox.active .light-qian {
	opacity: 1;
	animation: light1 1s infinite;
}
.treasureBox.active .light-hou {
	opacity: 1;
	animation: light2 3s linear infinite;
}
/* .treasureBox.specil .light-hou {
	opacity: .5;
	animation: light2 6s linear infinite;
} */

.cardList {
	-webkit-overflow-scrolling: touch;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	margin: auto;
	/* background: rgba(0,0,0,0.75); */
	overflow-y: scroll;
}
.cardList li {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 50%;
	/* margin-top: 20px;
	margin-bottom: 20px; */
	background: url(../img/openBox-bg-back.png) no-repeat center/6.6rem 6.6rem;
	transition: all .5s;
	/* background: url(../img/1.png); */

}
.cardList li:first-child {
	margin-top: 40.5%;
}
/* .cardList li:last-child {
	margin-bottom: 50%;
} */
.cardList li.active {
	transform:rotateY(180deg);
	/* background: green; */
	/* animation: card-animation 5s; */
}

.cardList li .prizeBg{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	width: 8.08rem;
	height: 8.08rem;

}
.cardList li .prizeBg.active {
	transition: all .5s;
	background: url(../img/openBox-bg-back-open.png) no-repeat center/8.08rem 8.08rem;
}
.cardList li.receive {
	width: 100%;
	height: 25%;
	background: none;
}
.cardList li.receive span {
	font-size: .54rem;
	line-height: 1.08rem;
	color: #722712;
	text-align: center;
	width: 4.5rem;
	height: 1.08rem;
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
	right: 0;
	margin: auto;
	background: url(../img/openBox-bg-receive.png) no-repeat center/contain;
}


@keyframes light1
{
0% {transform:scale(1)}
50%{transform:scale(1.1)}
100%{transform:scale(1)}
}
@keyframes light2
{
0% {transform:rotate(0deg)}
50%{transform:rotate(180deg)}
100%{transform:rotate(360deg)}
}

@keyframes box1
{
0% {transform:rotate(0deg);height: 6.1rem;}
25%{transform:rotate(10deg);height: 6.1rem;}
50%{transform:rotate(0deg);height: 6.1rem;}
75%{transform:rotate(10deg);height: 6.1rem;}
100%{transform:rotate(0deg);height: 6.1rem;}
}